<template>
  <div>
    <van-nav-bar
      fixed
      title="提现申请"
      left-arrow
      right-text="提现记录"
      @click-left="$utils.back($route.path)"
      @click-right="onClickRight"
    />
    <div class="has-top">
      <div class="head-bg-box bg-primary"></div>
      <!-- 背景 -->
      <div class="page-content-box mlr-25">
        <div class="color-white mt-50 mlr-30">
          <p class="color-white">可提现金额</p>
          <p class="fs-36">
            ￥
            <span class="fs-60">{{money}}</span>
          </p>
        </div>
        <div class="br-12 mt-50 pd-30 bg-white">
          <p>提现金额</p>
          <van-form class="form-box fs-28" @submit="onSubmit">
            <van-field
              v-model="money1"
              type="number"
              name="姓名"
              label
              placeholder="请输入提现金额"
              :rules="[{ required: true,message:' '}]"
            >
              <template #button>
                <span class="color-primary fs-24" @click="all">全部提取</span>
              </template>
            </van-field>
            <van-field
              readonly
              right-icon="arrow"
              clickable
              name="picker"
              :value="value"
              label="提现至"
              @click="showPicker = true"
            >
              <template #input>
                <p class="tar flex-fe-c" style="width:100%">
                  <SvgIcon :icon-class="bankIcon" class-name="fs-45" />
                  <span class="ml-10">{{bankName}}</span>
                </p>
              </template>
            </van-field>
            <p class="flex-s-c">
              <span>提现手续费</span>
              <span>6.00元</span>
            </p>
            <div class="pt-90 pb-10 flex-center">
              <van-button class="hollow-btn flex-g-1 br-12" native-type="submit" @click="confirm">提交</van-button>
            </div>
            <p class="color-gray fs-24">工作日审核提现，给你带来带来不便敬请原谅！</p>
          </van-form>
          <van-popup class="popup" v-model="showPicker" position="bottom">
            <div class="pd-32 hb">
              <p class="fs-36">选择到账银行卡</p>
              <p class="color-gray-light">请留意各银行到账时间</p>
            </div>
            <van-radio-group v-model="radio" class="radio-group">
              <van-cell
                v-for="(item,index) in radioList"
                :key="index"
                clickable
                class="flex-s-c"
                @click="changeRadio(index)"
              >
                <template #title>
                  <SvgIcon :icon-class="item.icon" class="mr-30 fs-40" />
                  <span class="custom-title">{{item.name}}</span>
                </template>
                <template #right-icon>
                  <van-radio :name="index">
                    <template #icon="props">
                      <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                    </template>
                  </van-radio>
                </template>
              </van-cell>
            </van-radio-group>
          </van-popup>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import formItem from 'components/formItem'
import contentSearch from 'components/contentSearch'
import shopImg from 'assets/images/bussiness_goods4.png'
import { Toast } from 'vant'
import utils from 'utils/utils.js'
export default {
  components: {
    SvgIcon,
    formItem,
    contentSearch
  },
  data() {
    return {
      money: 369.0,
      money1: 195.4,
      showPicker: false,
      value: 123,
      bankIcon: 'bank',
      bankName: '银行卡',
      radio: 0,
      radioList: [
        { icon: 'balance', name: '余额' },
        { icon: 'wechat', name: '微信' },
        { icon: 'bank', name: '工商银行' },
        { icon: 'balance', name: '余额' }
      ]
    }
  },

  methods: {
    onClickRight() {
      this.$router.push('/withdraw/record')
    },
    all() {
      this.money1 = this.money
    },
    onSubmit() {
      console.log('onSubmit')
    },
    changeRadio(index) {
      console.log(index)
      this.radio = index
      this.bankIcon = this.radioList[index].icon
      this.bankName = this.radioList[index].name
      this.showPicker = false
    },
    confirm() {
      let that = this
      Toast({ message: '提交成功' })
      setTimeout(that.$router.push('/withdraw/record'), 3000)
    }
  }
}
</script>
<style lang="scss" scoped>
.head-bg-box {
  height: 363px;
  border-radius: 0;
}
/deep/.van-nav-bar__right {
  .van-nav-bar__text {
    color: $color9;
    font-size: 12px;
  }
}
.form-box {
  .van-cell {
    padding-left: 0;
    padding-right: 0;
    &::after {
      left: 0;
    }
  }
  .van-cell:first-child {
    position: relative;
    font-size: 20px;
    &::before {
      content: '￥';
    }
  }
  .van-cell:nth-child(2) {
    /deep/.van-field__control {
      text-align: right;
    }
    &:after {
      content: none;
    }
  }
}
.popup {
  border-radius: 12px 12px 0 0;
}
.radio-group {
  max-height: 440px;
  overflow: scroll;
}
</style>
